<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="2">
          <el-button style="margin-left: 10px" @click="insert"  v-hasPermi="['PRE_INSERT']" type="primary">添加血液检查报告</el-button>
        </el-col>
        <el-button style="margin-left: 0px" @click="printPDF"   type="primary">血液检测对照表报告</el-button>
      </el-row>
      <!-- 用户列表 -->
      <el-table :data="tableList" border stripe>
        <el-table-column type="index" label="序号" min-width="150px"/>
        <el-table-column label="白细胞形态" prop="bh"/>
        <el-table-column label="红细胞形态"  prop="rh"/>
        <el-table-column label="白细胞计数" prop="wbc"/>
        <el-table-column label="中性细胞比率" prop="neu"/>
        <el-table-column label="淋巴细胞比率" prop="lym"/>
        <el-table-column label="单核细胞比率" prop="mon"/>
        <el-table-column label="嗜碱细胞比率" prop="bas"/>
        <el-table-column label="嗜酸细胞比率" prop="eos"/>
        <el-table-column label="中性细胞计数" prop="neuNum"/>
        <el-table-column label="淋巴细胞计数" prop="lymNum"/>
        <el-table-column label="单核细胞计数" prop="monNum"/>
        <el-table-column label="嗜酸细胞计数" prop="eosNum"/>
        <el-table-column label="嗜碱细胞计数" prop="basNum"/>
        <el-table-column label="红细胞计数" prop="rbc"/>
        <el-table-column label="血红蛋白" prop="hgb"/>
        <el-table-column label="血小板" prop="ptl"/>
        <el-table-column  label="创建时间" prop="createTime"  width="auto" min-width="200px" />
        <el-table-column label="体检人" prop="people"/>
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="update(scope.row)"/>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(scope.row.id)"/>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-if="total>0"
        @size-change="handlePageSize"
        @current-change="handlePageNumber"
        :current-page="queryInfo.pageNumber"
        :page-sizes="[7, 15, 50, 100]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"/>
    </el-card>
    <el-dialog :title="title" :visible.sync="open" width="60%" @close="dialogClose">
      <el-form :model="form" ref="form" :rules="rules" >
        <el-row>
          <el-col :span="4">
            <el-form-item label="白细胞形态" prop="bh">
              <el-input v-model="form.bh"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="红细胞形态" prop="rh">
              <el-input v-model="form.rh"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="白细胞计数" prop="wbc">
              <el-input v-model="form.wbc"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="中性细胞比率" prop="neu">
              <el-input v-model="form.neu"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="淋巴细胞比率" prop="lym">
              <el-input v-model="form.lym"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="单核细胞比率" prop="mon">
              <el-input v-model="form.mon"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">
            <el-form-item label="嗜碱细胞比率 " prop="bas">
              <el-input v-model="form.bas"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="嗜酸细胞比率" prop="eos">
              <el-input v-model="form.eos"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="中性细胞计数" prop="neuNum">
              <el-input v-model="form.neuNum"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="淋巴细胞计数" prop="lymNum">
              <el-input v-model="form.lymNum"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="单核细胞计数" prop="monNum">
              <el-input v-model="form.monNum"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="嗜酸细胞计数" prop="eosNum">
              <el-input v-model="form.eosNum"/>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>

          <el-col :span="4">
            <el-form-item label="嗜碱细胞计数" prop="basNum">
              <el-input v-model="form.basNum"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="红细胞计数" prop="rbc">
              <el-input v-model="form.rbc"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="血红蛋白" prop="hgb">
              <el-input v-model="form.hgb"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="血小板" prop="ptl">
              <el-input v-model="form.ptl"/>
            </el-form-item>
          </el-col>

        </el-row>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clickCancel">取 消</el-button>
        <el-button type="primary" @click="clickOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export  default {
        data(){
            return{
                //分页查询条件
                queryInfo:{
                    //页码
                    pageNumber:1,
                    //页数
                    pageSize:7,
                    //关键字
                    queryString:null
                },
                //表格数据
                tableList:[],
                //总记录数
                total:0,
                //表单的标题
                title:null,
                //是否打开对话框
                open:false,
                //加载
                loading:false,
                //表单数据
                form:{},
                //表单校验
                rules:{
                    rate:[
                        { required: true, message: '请输入心率次/分', trigger: 'blur' },
                    ],
                    lungs:[
                        {required: true, message: '请输入肺部信息', trigger: 'blur'},
                    ],
                    sounds:[
                        {required: true, message: '请输入心音信息', trigger: 'blur'},
                    ],
                    frequency:[
                        {required: true, message: '请输入心律信息', trigger: 'blur'},
                    ],
                    abdomen:[
                        {required: true, message: '请输入腹部信息', trigger: 'blur'},
                    ],
                    nervous:[
                        {required: true, message: '请输入神经系统信息', trigger: 'blur'},
                    ],
                    other:[
                        {required: true, message: '请输入其它信息', trigger: 'blur'},
                    ],
                    liver:[
                        {required: true, message: '请输入肝脏信息', trigger: 'blur'},
                    ],
                    spleen:[
                        {required: true, message: '请输入脾脏信息', trigger: 'blur'},
                    ],

                    people:[
                        {required: true, message: '请输入体检者', trigger: 'blur'},
                        {min: 1, max:5 ,message:'请输入正常姓名',trigger: 'blur' }

                    ],
                }
            }
        },
        /*页面初始化调用方法*/
        created() {
            this.findPage();
        },
        methods:{
            insert(){
                this.title='新增血液检查记录';
                this.open=true;
            },
            update(row){
                this.form=row;
                this.title='修改血液检查报告';
                this.open=true;
            },
            /*分页查询*/
            findPage(){
                this.loading=true;
                this.$ajax.post('/food/cell/findPage',this.queryInfo).then((res)=>{
                    this.loading=false;
                    this.tableList=res.data.data.rows;
                    console.log(this.tableList,"1")
                    this.total=res.data.data.total;
                });
            },
            /*页码改变事件*/
            handlePageNumber(newPageNumber){
                //将分页的新数据赋值给分页参数
                this.queryInfo.pageNumber=newPageNumber;
                //调分页的方法
                this.findPage();
            },
            /*页数改变的事件*/
            handlePageSize(newPageSize){
                this.queryInfo.pageSize=newPageSize;
                this.findPage();

            },
            deleteById(id){
                this.$confirm('您将删除编号为('+id+')的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //调后端的退出接口
                    this.$ajax.delete(`/food/delete/cell/${id}`).then((res)=>{
                        this.$message.success(res.data.message);
                        this.findPage();
                        this.queryInfo.pageNumber=1;
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            /*关闭对话框的事件*/
            dialogClose(){
                this.$refs.form.resetFields();
            },
            /*点击取消*/
            clickCancel(){
                this.form={};
                this.open=false;
                this.findPage();
            },
            /*点击确定*/
            printPDF(){

                this.$ajax.get('/tool/print').then((res) => {
                    console.log(this.queryInfo,"111111")
                    console.log(res,"sasa")
                    window.open(  'http://localhost:8088/tool/pdf/cell');
                })
            },
            clickOK(){
                //进行表单校验
                this.$refs.form.validate((valid)=>{
                    //校验不通过
                    if(!valid) return this.$message.error('表单校验不通过，请检查后提交！');
                    //校验通过
                    if(this.form.id===undefined || this.form.id===null){
                        this.$ajax.post('/food/insert/cell',this.form).then(res=>{
                            this.$message.success(res.data.message);
                            this.open=false;
                            this.findPage();
                        });
                    }else {
                        this.$ajax.post('/food/update/cell',this.form).then(res=>{
                            console.log(this.form.id,"asssss")
                            console.log(this.form,"11")
                            this.$message.success(res.data.message);
                            this.open=false;
                            this.findPage();
                        });

                    }

                });

            }

        }

    }
</script>
<style scoped>

</style>
